<template>
    <div class="huiyi">

      <div id="submit">
        <el-form :model="submit">
            <div class="fgggg">
                <span>会议编号：</span>
                <el-input style="width:100px" v-model="submit.mid" placeholder=""></el-input>
            </div>
            <div class="fgggg">
              <span>会议名称：</span>
                <el-input style="width:150px" v-model="submit.meetingName" placeholder=""></el-input>
              </div>
              <div class="fgggg">
                <span>会议类型：</span>
              <el-select v-model="submit.type" clearable  placeholder="请选则类型">
                <el-option
                  v-for="item in meetingType"
                  :key="item.status"
                  :label="item.name"
                  :value="item.status">
                </el-option>
              </el-select>
              </div>
 
            <template style="width:150px">
            <div class="block fgggg">
            <span class="demonstration">会议时间：</span>
            <el-date-picker
            v-model="submit.meetingTime"
            type="datetime"
            placeholder="选择日期时间">
            </el-date-picker>
          </div>
          </template>
          <el-button type="primary" @click="this.getMeetingsByMsg">查询</el-button>
        
        </el-form>
        
      </div>

      <div id="operate">
        <el-button class="op" type="primary" @click="dialogVisible2 = true">添加会议</el-button>
        <el-button class="op" type="danger" @click="deletebtn">删除会议</el-button>
      </div>

        <!-- 列表组件 -->
  <el-table class="eltab"
   @selection-change="handleSelectionChange"
    :data="meetings"
    style="width: 100%">
      <el-table-column
      type="selection"
      width="50">
    </el-table-column>
    <el-table-column label="会议编号" width="80">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.mid }}</span>
      </template>
    </el-table-column>
    <el-table-column label="会议名称" width="200">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.meetingName }}</span>
      </template>
    </el-table-column>
   <el-table-column label="开始时间" width="250">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
      </template>
    </el-table-column>
 <el-table-column label="结束时间" width="250">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
      </template>
    </el-table-column>
 <el-table-column label="会议类型" width="100">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.type == 1 ? '教研室活动' : '学生座谈会' }}</span>
      </template>
    </el-table-column>
 
<!-- 操作模块 -->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        <el-button
          size="mini"
          @click="handleDownload(scope.$index, scope.row)">下载文件</el-button>
          <el-button
          size="mini"
          type="primary"
          @click="handleDetail(scope.$index, scope.row)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
 <el-pagination
  background
   @current-change="handleCurrentChange"
   :current-page="page"
    :page-size='limit'
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

<!-- 修改对话框 -->
<el-dialog
  title="编辑"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <div>
    <div>
        会议名称：<el-input style="width:auto" v-model="meetingMsg.meetingName" placeholder="请输入内容"></el-input>
    </div>
    <div>
        会议类型：<template>
        <el-select v-model="meetingMsg.type" placeholder="请选择">
            <el-option
            v-for="item in meetingType"
            :key="item.status"
            :label="item.name"
            :value="item.status">
            </el-option>
        </el-select>
        </template>
    </div>
    <div>
        <template>
            <div class="block">
            <span class="demonstration">开始时间：</span>
            <el-date-picker
            v-model="meetingMsg.startTime"
            type="datetime"
            placeholder="选择日期时间">
            </el-date-picker>
        </div>
        </template>
    </div>
    <div>
        <template>
            <div class="block">
            <span class="demonstration">结束时间：</span>
            <el-date-picker
            v-model="meetingMsg.endTime"
            type="datetime"
            placeholder="选择日期时间">
            </el-date-picker>
        </div>
        </template>
    </div>
    <div>
        <span>会议描述：</span>
        <el-input
        style="width:221px"
        type="textarea"
        :autosize="{ minRows: 0, maxRows: 4}"
        placeholder="请输入内容"
        v-model="meetingMsg.describe">
        </el-input>
    </div>
    <div>
        <h4>上传文件(重复上传则之前的文件被覆盖)：</h4>

        <el-upload
        class="upload-demo"
        ref="upload"
        :headers="hed"
        :action=uploadUrl
        :limit="1"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
        <div slot="tip" class="el-upload__tip">只能上传jpg/png/zip/bmp/doc/docx/ppt/pptx/excel/txt文件,多文件打包为压缩包，且不超过50mb</div>
        </el-upload>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="this.update">确 定</el-button>
  </span>
</el-dialog>


<!-- 新增对话框 -->
<el-dialog
  title="添加会议"
  :visible.sync="dialogVisible2"
  width="30%">
  <div class="addclass">
    <div>
        会议名称：<el-input style="width:auto" v-model="meetingMsg.meetingName" placeholder="请输入内容"></el-input>
    </div>
    <div>
        会议类型：<template>
        <el-select v-model="meetingMsg.type" placeholder="请选择">
            <el-option
            v-for="item in meetingType"
            :key="item.status"
            :label="item.name"
            :value="item.status">
            </el-option>
        </el-select>
        </template>
    </div>
    <div>
        <template>
            <div class="block">
            <span class="demonstration">开始时间：</span>
            <el-date-picker
            v-model="meetingMsg.startTime"
            type="datetime"
            placeholder="选择日期时间">
            </el-date-picker>
        </div>
        </template>
    </div>
    <div>
        <template>
            <div class="block">
            <span class="demonstration">结束时间：</span>
            <el-date-picker
            v-model="meetingMsg.endTime"
            type="datetime"
            placeholder="选择日期时间">
            </el-date-picker>
        </div>
        </template>
    </div>
    <div>
        <span>会议描述：</span>
        <el-input
        style="width:221px"
        type="textarea"
        :autosize="{ minRows: 0, maxRows: 4}"
        placeholder="请输入内容"
        v-model="meetingMsg.describe">
        </el-input>
    </div>
    <div>
        <h4>上传文件(重复上传则之前的文件被覆盖)：</h4>

        <el-upload
        class="upload-demo"
        ref="upload"
        :action=uploadUrl
        :headers="hed"
        :limit="1"
        :file-list="fileList"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
        <div slot="tip" class="el-upload__tip">只能上传jpg/png/zip/bmp/doc/docx/ppt/pptx/excel/txt文件,多文件打包为压缩包，且不超过50mb</div>
        </el-upload>
    </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="this.insert">确 定</el-button>
  </span>
</el-dialog>

    </div>
</template>

<script>
import {http,URL} from '../../../../uitl/request'

export default {
    created() {
        this.getMeetings(),
        this.findMeetingType(),
        this.getLoginUser()
    },
    data(){
        return{
            userMsg: {},
            meetings: [],
            page:1,
            limit:15,//一页有多少条数据
            dialogVisible: false,
            dialogVisible2: false,
            meetingMsg: {},
            meetingType: [],
            fileList: [],
            uploadUrl: '',
            delMeetings: [],
            submit: {},
            hed:{token:window.localStorage.getItem('jysToken')}
        }
    },
    methods: {
        async update() {
            this.dialogVisible = false
            const {data:res} = await http.put(`/meeting/updateMeeting`,this.meetingMsg)
            if(!res.data) {
              this.$message.error(res.msg)
              return
            }
            this.$refs.upload.submit();
            this.fileList = []
            this.meetingMsg = {}
            this.uploadUrl = ''
            this.$message.success(res.data)
            this.getMeetings()
        },
        async findMeetingType() {
            const {data:res} = await http.get(`/meeting/findMeetingType`)
            if(res.data == undefined) {
              this.$message.error(res.msg)
              return
            }
            this.meetingType = res.data
            console.log(res.data)
        },
        async handleEdit(index, row) {
            const {data:res} = await http.get(`/meeting/findById/${row.mid}`)
            if(res.data == undefined) {
              this.$message.error(res.msg)
              return
            }
            this.meetingMsg = res.data
            this.uploadUrl = `${URL}/meeting/uploadMeetingFile/` + this.meetingMsg.mid
            this.dialogVisible = true
        },
        //  获取选择到的数据
        handleSelectionChange(val) {
        this.shu = val;//赋值一个对象到数组里面
      },
        //当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
       //  console.log(`当前页: ${val}`);
         this.page = val;
         this.getMeetings()
        // console.log(this.page);
     },
     async getMeetings() {
        const {data:res} = await http.post(`/meeting/list/${this.page}/${this.limit}`)
        if(res.data == undefined) {
          const {data:res} = await http.get(`/meeting/getMeetingByUid`)
          console.log(res)
            if(res.data == undefined){
              this.$message.error(res.msg)
              return
            }
            this.meetings = res.data
            return
        }
        this.meetings = res.data.records
     },
     async getMeetingsByMsg() {
        const {data:res} = await http.post(`/meeting/list/${this.page}/${this.limit}`, this.submit)
        if(res.data == undefined) {
              this.$message.error(res.msg)
              return
  }
        this.meetings = res.data.records
     },
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(()=> {
            done();
            this.meetingMsg = {}
          })
          .catch(()=> {});
      },
      async getLoginUser() {
        const {data:res} = await http.get(`/user/findLoginUser`)
        this.userMsg = res.data
      },
      async insert() {
        if(this.userMsg.level < 1) {
          this.$message.error("没有权限操作")
          return
        }
        // 判断会议时间合法性
        if(this.meetingMsg.startTime.getTime() >= this.meetingMsg.endTime.getTime()) {
          this.$message.error("开始时间不能大于结束时间")
          return
        }

        this.dialogVisible2 = false

        this.meetingMsg.startTime = this.dateFormat(this.meetingMsg.startTime)
        this.meetingMsg.endTime = this.dateFormat(this.meetingMsg.endTime)

        this.meetingMsg.fileUrl = null
        if(!this.meetingMsg.meetingName || !this.meetingMsg.describe || !this.meetingMsg.type) {
          this.$message.error("请填写完整表单")
          return
        }
        await http.post(`/meeting/saveMeeting`, this.meetingMsg).then((res)=>{
          if(res.data == undefined) {
            return  this.$message.error(res.msg)
          }
          this.uploadUrl = `${URL}/meeting/uploadMeetingFile/${res.data.data}` 
          this.$message.success("添加成功")
        })
        this.$refs.upload.submit();
        this.uploadUrl = ''
        this.fileList = []
        this.meetingMsg = {}
        this.getMeetings()
      },
      cancel() {
        this.dialogVisible2 = false
        this.dialogVisible = false
        this.meetingMsg = {}
      },
      async handleDownload(index, row) {
        const {data:res} = await http.get(`meeting/download/${row.mid}`)
              
        if(res.msg !== "文件不存在") {
          window.location = `${URL}/meeting/download/${row.mid}`
        }else {
          this.$message.error("文件不存在")
        }
      },
      async handleDelete(index, row) {
        let ids = []
        ids.push(row.mid)
        // const {data:res} = await http.post(`meeting/deleteMeeting`, ids)
       await http.post(`meeting/deleteMeeting`, ids)
        this.$message.success("删除成功")
        this.getMeetings()
      },
      //  获取选择到的数据
      handleSelectionChange(val) {
        this.delMeetings = val;//赋值一个对象到数组里面
      },
      // 批量删除
      async deletebtn(){
          const arr1=[]
          this.delMeetings.map(ite=>{
          arr1.push(ite.mid)
              })
          try {
              const {data:res}=await http.post('/meeting/deleteMeeting',arr1)
              if(!res.data) {
              this.$message.error(res.msg)
              return
  }
            this.$message({ type:'success',message:res.data})
          } catch (err) {
              Promise.reject(err)
          }
          this.getMeetings()
      },
      //格式化日期格式 2
      dateFormat(data){
        let date = new Date(data);
        let YY = date.getFullYear() + '-';
        let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + " ";
        let HH = date.getHours() + ":";
        let mf = date.getMinutes() + ":";
        let ss = date.getSeconds();
        // console.log(YY + MM + DD + HH + mf + ss)
        return YY + MM + DD + HH + mf + ss;
      },
      handleDetail(index, row) {
        this.$router.push({path:'/home-3-2',query:{mid:row.mid}})
      }
    }
    
}
</script>

<style scoped>
.huiyi{
    line-height: 25px;
}

#submit{
  width: 100%;
}

.fgggg{
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

#operate .op{
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.addclass div{
  margin: 5px 0px;
}
</style>